<!--
 * Copyright ©
 * #
 * @author: zw
 * @date: 2024-01-18
 -->

<template>
  <div class="h-full">
    <ul class="h-full float-right mx-2 my-1 flex items-center">
      <template v-for="(item, index) in icons">
        <el-tooltip class="box-item" effect="dark" :content="item.name" placement="top">
          <li class="h-8 w-8 px-2 py-1 bg-gray-50 flex items-center hover:bg-gray-400 hover:text-white" :key="index" :title="item.cmd" @click="command(item)">
            <i :class="['iconfont', item.icon]"></i>
          </li>
        </el-tooltip>
      </template>

      <li class="h-8 w-8 px-2 py-1 bg-gray-50 flex items-center hover:bg-gray-400 hover:text-white">
        <i class="iconfont icon-upload-demo" @click.stop="upload = !upload"></i>

        <ul v-show="upload">
          <li class="iconfont icon-JSON" @click.stop="save('json')"><span>JSON</span></li>
          <li class="iconfont icon-PNG" @click.stop="save('png')"><span>PNG</span></li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
//  import {} from ''
export default {
  name: "control",
  data() {
    return {
      icons: [
        {
          icon: "icon-undo",
          name: "撤销",
          cmd: "undo",
          class: "disable",
        },
        {
          icon: "icon-redo",
          name: "恢复",
          cmd: "redo",
          class: "disable",
        },
        {
          icon: "icon-copy",
          name: "复制",
          cmd: "copy",
          class: "disable",
        },
        {
          icon: "icon-shanchu",
          name: "删除",
          cmd: "delete",
          class: "disable",
        },
        {
          icon: "icon-kuangxuan",
          name: "框选",
          cmd: "selectFrame",
          class: "disable",
        },
        {
          icon: "icon-group",
          name: "成组",
          cmd: "createGroup",
          class: "disable",
        },
        {
          icon: "icon-ungroup",
          name: "取消成组",
          cmd: "ungroup",
          class: "disable",
        },
        {
          icon: "icon-yemian",
          name: "使用JSON",
          cmd: "JSONString",
          class: "disable",
        },
      ],
    };
  },

  mounted() {},

  methods: {
    command(item) {
      this.$emit("command", item.cmd);
    },
    save() {},
  },
  //  End
};
</script>

<style lang="scss" scoped></style>
